<template>
	<view class="container">
		<uni-section title="欢迎使用预购网" type="line">
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :model="preFormData" labelWidth="80px">
					<uni-forms-item label="姓名" required>
						<uni-easyinput v-model="preFormData.name" placeholder="您的姓名" disabled="true" :value="name"/>
					</uni-forms-item>
					<uni-forms-item label="联系电话" required>
						<uni-easyinput v-model="preFormData.registPhone" placeholder="您的联系电话"  disabled="true" :value="oldPhone"/>
					</uni-forms-item>
					<uni-forms-item label="新的手机号" required>
						<uni-easyinput v-model="preFormData.newPhone" placeholder="请输入您的新联系电话" />
					</uni-forms-item>
					<text>平台无任何收费项。<text
							style="color:rgba(252, 151, 195, 0.6)">为保护安全隐私，请勿泄露您的账号密码！</text></text>
				</uni-forms>
				<button class="sub-type" type="primary" @click="submit('baseForm')">确认更换</button>

			</view>
		</uni-section>
	</view>
</template>

<script>
	import cityJson from '@/data/cityData.json'
	import graceChecker from '@/common/graceChecker.js'
	import datejs from 'dayjs'
	import utils from '@/utils/requset.js'
	import operate from '@/common/operate.js'
	import app from '@/App.vue'
		export default {
			data() {
			 
				return {
					oldPhone:uni.getStorageSync("userInfo").registPhone,
					name:uni.getStorageSync("userInfo").nickName,
					// 基础表单数据
					preFormData: {
						id:uni.getStorageSync("userInfo").id,
						newPhone: '',
						registPhone:''
					},
					 
				}
			},
			onLoad: function(option) {
				console.log(option)
				 app.navTitle();
			},
			onShow() {
				 app.navTitle();
				// let userId = uni.getStorageSync("userInfo").id;
				// if(userId){
				// 	 uni.switchTab({
				// 	 	url: '/pages/tabbar/tabbar-1/tabbar-1'
				// 	 })
				// }else{
					 
				// }
			},
			methods: {
				submit(ref) {
							const phonrRule = [{
								name: "newPhone",
								checkType: "phoneno",
								errorMsg: "联系手机号码格式不正确"
							}];
							//验证手机号格式
							let checkRes = graceChecker.check(this.preFormData, phonrRule)
							if (checkRes) {
								//验证通过
								console.log('传递参数为：' + JSON.stringify(this.preFormData));
								var data = this.preFormData
								this.preFormData.registPhone = this.preFormData.newPhone;
								console.log('checkRes:', checkRes);
								//todo 调用接口传递数据
								var header = {},
									url = "/purchase/preUser/update", 
									method = "POST";
								if (method) {
									method = method.toUpperCase(); 
									if (method == "POST") {
										header = {
										   'Content-Type': "application/json"
										};
									} else {
										header = {
											'Content-Type': "application/json"
										};
									}
								}
											 
								 uni.request({
									url: operate.api + url,		
									data: data,
									method: method,
									header: header,
									success: (res) => {
										if(res.statusCode && res.statusCode ==200){
											
											uni.setStorageSync("userInfo",res.data.data);

											uni.showModal({
												title: '通知',
												content: '手机号更换成功，是否立即发布采购？',
												success: function(res) {
													 
													if (res.confirm) {
														console.log('用户点击确定')
														uni.navigateTo({
															url: '/pages/issue-purchase/issue-purchase'
														})
													} else if (res.cancel) {
														//跳转回首页列表
														uni.reLaunch({
															url: '/pages/tabbar/tabbar-1/tabbar-1'
														})
													}
												}
											})
										}else{
											console.log("数据状态码！=200")
										}
										
									}
								})
							} else {
								uni.showModal({
									title: '手机格式不正确',
									content: phonrRule[0].errorMsg,
									showCancel: false,
								})
							}
						}
					}
				}
	</script>
	
	<style lang="scss">
		.example {
			padding: 15px;
			background-color: #fff;
		}
	
		.segmented-control {
			margin-bottom: 15px;
		}
	
		.button-group {
			margin-top: 15px;
			display: flex;
			justify-content: space-around;
		}
	
		.form-item {
			display: flex;
			align-items: center;
			flex: 1;
		}
	
		.sub-type {
			margin-top: 15px;
		}
	</style>
	